<script>
    Vue.component('stock-manage', {
        template: `
<div class="stock-manage-com">
  <!---库存余额 按商品 以及按仓库区分--->
  <el-row style="margin-left:0px;margin-right:0px;">
    <el-col :span="16">
     <div class="l-p">
        <p>当前库存总余额：{{totalBalanceMoney}}元</p>
      </div>
    </el-col>
    <el-col :span="8" class="t-r">
      <el-dropdown @command="switchBalanceType" trigger="click">
          <el-button type="primary" size="mini" plain>
                统计维度：{{getBalanceTypeStr}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :disabled="balanceType=='warehouse'" command="warehouse">仓库维度</el-dropdown-item>
                <el-dropdown-item :disabled="balanceType=='product'" command="product">产品维度</el-dropdown-item>
          </el-dropdown-menu>
      </el-dropdown>
      <el-divider direction="vertical"></el-divider>
      <el-button type="info" size="mini" @click="refresh" class="frBtn" plain><i class="el-icon-refresh" /> 刷新</el-button>
    </el-col>
  </el-row>
  <!---仓库、产品维度的余额统计--->
  <div v-if="balanceType=='warehouse'">
    <el-row :gutter="20" style="margin-left:0px;margin-right:0px;">
      <el-table
        :data="houseBalanceListData"
        border
        style="width: 100%">
         <el-table-column
          prop="index"
          label="序号"
          align="center"
          width="60">
          <template slot-scope="scope">
            <span>#{{indexCal(scope.$index,'houseBalance')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          label="仓库名称">
           <template slot-scope="scope">
            <el-button type="text" @click="showHouseDetail(scope.row['id'],scope.row['title'])">{{scope.row.title}}</el-button>
          </template>
        </el-table-column>
         <el-table-column
          prop="money"
          align="center"
          sortable
          label="库存数量">
          <template slot-scope="scope">
               <span>{{scope.row['total_num']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="money"
          align="center"
          sortable
          label="库存余额">
          <template slot-scope="scope">
               <span>{{scope.row['total_balance']}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--分页------>
    <p style="margin-top: 10px;text-align: center">
        <el-pagination
        background
        layout="prev, pager, next, total"
        :page-size="houseBalanceListPage.pageSize"
        :total="houseBalanceListPage.totalCount"
        @current-change="handleHouseBalancePageChange"
        v-if="houseBalanceListData.length >= houseBalanceListPage.pageSize"
        >
        </el-pagination>
    </p>
  </div>

  <div v-if="balanceType=='product'">
    <el-row :gutter="20" style="margin-left:0px;margin-right:0px;">
      <el-table
        :data="productBalanceListData"
        border
        style="width: 100%">
         <el-table-column
          prop="index"
          label="序号"
          align="center"
          width="60">
          <template slot-scope="scope">
            <span>#{{indexCal(scope.$index,'productBalance')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          label="产品名称">
           <template slot-scope="scope">
            <el-button type="text" @click="showProductDetail(scope.row['product_id'],scope.row['product_title'])">{{scope.row['product_title']}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="money"
          align="center"
          label="库存数量">
          <template slot-scope="scope">
               <span>{{scope.row['pure_num']}} {{scope.row['product_unit']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="money"
          align="center"
          sortable
          label="库存余额">
          <template slot-scope="scope">
               <span>{{scope.row['balance_money']}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--分页------>
    <p style="margin-top: 10px;text-align: center">
        <el-pagination
        background
        layout="prev, pager, next, total"
        :page-size="productBalanceListPage.pageSize"
        :total="productBalanceListPage.totalCount"
        @current-change="handleProductBalancePageChange"
        v-if="productBalanceListData.length >= productBalanceListPage.pageSize"
        >
        </el-pagination>
    </p>
  </div>

  <!---流水记录--->
  <div style="height:20px;"></div>
  <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <el-row>
        <el-col span="16">
        <span><b>库存流水</b></span>
        </el-col>
        <el-col span="8" class="t-r">
            <el-button type="primary" size="mini" @click="balanceIn" plain><i class="el-icon-upload"/> 产品入库</el-button>
            <el-button type="success" size="mini" @click="balanceOut" plain><i class="el-icon-download"/> 产品出库</el-button>
            <el-button type="info" size="mini" @click="balanceTrans" plain><i class="el-icon-position"/> 产品调拨</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="flow-box">
        <el-table
        :data="flowListData"
        style="width: 100%">
         <el-table-column
          prop="index"
          label="序号"
          align="center"
          width="60">
          <template slot-scope="scope">
            <span>#{{indexCal(scope.$index,'flow')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tally_date"
          align="center"
          label="流水日期">
        </el-table-column>
        <el-table-column
          prop="house_title"
          align="center"
          label="仓库名称">
        </el-table-column>
        <el-table-column
          prop="product_title"
          align="center"
          label="产品名称">
        </el-table-column>
        <el-table-column
          prop="product_unit"
          align="center"
          label="单位">
        </el-table-column>
        <el-table-column
          prop="in_num"
          align="center"
          label="入库">
           <template slot-scope="scope">
            <span v-if="parseInt(scope.row['in_num']) > 0 ">{{scope.row['in_num']}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="out_num"
          align="center"
          label="出库">
          <template slot-scope="scope">
            <span v-if="parseInt(scope.row['out_num']) > 0 ">{{scope.row['out_num']}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="product_cost_price"
          align="center"
          label="成本价">
        </el-table-column>
        <el-table-column
          prop="balance_money"
          align="center"
          label="库存成本">
        </el-table-column>
        <el-table-column
          prop="created_time"
          align="center"
          label="操作时间">
        </el-table-column>
        <el-table-column
          prop="balance_money"
          align="center"
          label="操作">
          <template slot-scope="scope">
                <el-button type="text"  @click="delRecord(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>


      </el-table>
      </div>

      <!--分页------>
      <p style="margin-top: 10px;text-align: center">
        <el-pagination
        background
        layout="prev, pager, next, total"
        :page-size="flowListPage.pageSize"
        :total="flowListPage.totalCount"
        @current-change="handleFlowPageChange"
        v-if="flowListData.length >= flowListPage.pageSize"
        >
        </el-pagination>
      </p>
  </el-card>

    <!--入库/出库表单---->
    <stock-balance-form ref="balanceFormRef" :dialogShow="balanceDialog" :balanceType="balanceOptType"  @modalClose="balanceModalClose"></stock-balance-form>
    <!--仓库的产品明细---->
     <stock-balance-house-details :dialogShow="balanceProductDetailsDialog" :houseId="currentHouseId" :houseTitle="currentHouseTitle" @modalClose="balanceProductDetailsModalClose"></stock-balance-house-details>
    <!--产品的仓库明细---->
    <stock-balance-product-details :dialogShow="balanceHouseDetailsDialog" :productId="currentProductId" :productTitle="currentProductTitle" @modalClose="balanceHouseDetailsModalClose"></stock-balance-product-details>
</div>
    `,
        computed: {
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally () {
                return this.$store.state.currentTally
            },
            getBalanceTypeStr() {
                if(this.balanceType === 'warehouse') return '仓库维度';
                if(this.balanceType === 'product') return '产品维度';
                return '';
            }
        },
        data:function(){
            return {
                totalBalanceMoney:0, // 总库存金额
                balanceType:'warehouse', // 库存余额统计维度

                houseBalanceListData:[], // 仓库维度余额列表
                houseBalanceListPage:{
                    pageSize:10,
                    totalCount:0,
                },
                houseBalanceCurrentPage:1,
                productBalanceListData:[], // 产品维度余额列表
                productBalanceListPage:{
                    pageSize:10,
                    totalCount:0,
                },
                productBalanceCurrentPage:1,

                // 流水
                flowListData:[],
                flowCurrentPage:1,
                flowListPage:{
                    pageSize:10,
                    totalCount:0,
                },
                flowSearchForm:{},

                // 表单
                balanceDialog:false, // 出入库表单
                balanceOptType:'in', // 出入库类型

                // 仓库明细
                currentHouseId: 0,
                currentHouseTitle: '',
                balanceProductDetailsDialog:false,

                // 产品明细
                currentProductId: 0,
                currentProductTitle: '',
                balanceHouseDetailsDialog:false,
            }
        },
        methods:{
            initData() {
                this.getHouseBalanceList()
                this.getProductBalanceList()
                this.getFlowList()
                this.getSummary()
            },
            refresh() {
                this.houseBalanceCurrentPage = 1;
                this.productBalanceCurrentPage = 1;
                this.flowCurrentPage = 1;
                this.initData()
            },
            handleHouseBalancePageChange(currentPage) {
                this.houseBalanceCurrentPage = currentPage
                this.getHouseBalanceList()
            },
            handleProductBalancePageChange(currentPage) {
                this.productBalanceCurrentPage = currentPage
                this.getProductBalanceList()
            },
            handleFlowPageChange(currentPage) {
                this.flowCurrentPage = currentPage
                this.getFlowList()
            },
            getHouseBalanceList(){
                let that = this
                let getUrl = '/api/stock-balance/house'
                let params = {
                    tally_id : that.currentTallyId,
                    page: that.houseBalanceCurrentPage
                }
                axios.get(getUrl,{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: params
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.houseBalanceListData = res.data.data.data
                        that.houseBalanceListPage = res.data.data['pageInfo']
                    }else{
                        that.$message({
                            type: 'error',
                            message: '获取失败:'+res.data.error_message
                        })
                    }
                })
            },
            getProductBalanceList(){
                let that = this
                let getUrl = '/api/stock-balance/product'
                let params = {
                    tally_id : that.currentTallyId,
                    page: that.productBalanceCurrentPage
                }
                axios.get(getUrl,{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: params
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.productBalanceListData = res.data.data.data
                        that.productBalanceListPage = res.data.data['pageInfo']
                    }else{
                        that.$message({
                            type: 'error',
                            message: '获取失败:'+res.data.error_message
                        })
                    }
                })
            },
            getFlowList() {
                let that = this
                let getUrl = '/api/stock-balance/flow'
                that.flowSearchForm['tally_id'] = that.currentTallyId,
                that.flowSearchForm['page'] = that.flowCurrentPage,
                axios.get(getUrl,{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: that.flowSearchForm
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.flowListData = res.data.data.data
                        that.flowListPage = res.data.data['pageInfo']
                    }else{
                        that.$message({
                            type: 'error',
                            message: '获取失败:'+res.data.error_message
                        })
                    }
                })
            },
            getSummary() {
                let that = this
                let getUrl = '/api/stock-balance/summary'
                let params = {
                    tally_id : that.currentTallyId,
                }
                axios.get(getUrl,{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: params
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.totalBalanceMoney = res.data.data['total_balance_money']
                    }else{
                        that.$message({
                            type: 'error',
                            message: '获取失败:'+res.data.error_message
                        })
                    }
                })
            },
            handlePageChange(currentPage){
                this.currentPage = currentPage;
                this.getList()
            },
            getList() {
                let that = this
                let getUrl = '/api/stock-warehouse/lists'

                // 参数拼接
                that.houseSearchForm.tally_id = that.currentTallyId
                that.houseSearchForm.page = that.currentPage

                axios.get(getUrl,{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: that.houseSearchForm
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.houseListData = res.data.data.data
                        that.houseListPage = res.data.data['pageInfo']
                        if(that.houseListData.length === 0) {
                            that.$message({
                                message: '没有数据了~',
                                type: 'warning'
                            });
                        }
                    }else{
                        that.$message({
                            type: 'error',
                            message: '获取失败:'+res.data.error_message
                        })
                    }
                })
            },
            search() {
                this.currentPage = 1
                this.getList()
            },
            getAll() {
                this.currentPage = 1
                this.houseSearchForm = {}
                this.getList()
            },
            houseExport() {
                console.log('houseExport')
            },
            balanceModalClose(closeType) {
                this.balanceDialog = false
                this.refresh()
            },
            balanceIn() {
                this.balanceOptType = 'in'
                this.$refs['balanceFormRef'].resetForm()
                this.balanceDialog = true;
            },
            balanceOut() {
                this.balanceOptType = 'out'
                this.$refs['balanceFormRef'].resetForm()
                this.balanceDialog = true;
            },
            balanceTrans() {
                this.balanceOptType = 'trans'
                this.$refs['balanceFormRef'].resetForm()
                this.balanceDialog = true;
            },
            switchBalanceType(command) {
                console.log(command)
                this.balanceType = command
            },
            indexCal(index,type) {
                if(type === 'houseBalance') {
                    return (this.houseBalanceCurrentPage-1) * this.houseBalanceListPage.pageSize +  parseInt(index) + 1

                }else if(type === 'productBalance') {
                    return (this.productBalanceCurrentPage-1) * this.productBalanceListPage.pageSize +  parseInt(index) + 1

                }else if(type === 'flow') {
                    return (this.flowCurrentPage-1) * this.flowListPage.pageSize +  parseInt(index) + 1
                }
            },
            // 某仓库下的库存产品明细
            showHouseDetail(houseId,houseTitle) {
                this.currentHouseId = houseId
                this.currentHouseTitle = houseTitle
                this.balanceProductDetailsDialog = true
            },
            balanceProductDetailsModalClose() {
                this.balanceProductDetailsDialog = false
            },
            showProductDetail(productId,productTitle) {
                this.currentProductId = productId
                this.currentProductTitle = productTitle
                this.balanceHouseDetailsDialog = true
            },
            balanceHouseDetailsModalClose() {
                this.balanceHouseDetailsDialog = false
            },
            delRecord(index,row){
                let that = this;
                this.$confirm('确定要删除该行记录', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action === 'confirm') {
                            let postUrl = '/api/stock-balance/delflow'
                            axios.post(postUrl,{id:row['id'],tally_id:that.currentTallyId},{
                                headers: {'token': loginToken},
                            }).then(function(res) {
                                if(res.data.status === 'success'){
                                    that.$message({
                                        type: 'success',
                                        message: '删除成功~'
                                    })
                                    that.houseListData.splice(index, 1)
                                }else{
                                    that.$message({
                                        type: 'error',
                                        message: res.data.error_message
                                    })
                                }
                            })
                        }
                    }
                })
            },
        }
    })
</script>

<style>
    .t-r{text-align: right}
    .l-p{
        line-height: 30px;
        margin-bottom: 10px;
    }
    .l-p p{
        font-size: 15px;
        font-weight: bold;
    }
    .flow-box{
        cursor: initial;
    }
</style>
